<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="批量上传提示"
      width="500"
      :before-close="handleClose"
    >
      <div class="container">
        <span>批量上传需要使用预设文件模板，如未下载模板请先点击<el-button
            link
            style="color: #44BD60;"
            @click="downloadTemplate"
          >下载模板</el-button>进行信息录入后再次上传。</span>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            @click="cancelBtn"
            class="cancel-btn"
          >取消</el-button>
          <el-button
            type="primary"
            @click="continueUpload"
            class="confirm-btn"
          >
            <el-upload
              ref="upload"
              action=""
              :auto-upload="false"
              :show-file-list="false"
              accept=".xlsx, .xls"
              :on-change="handleFileChange"
            >
              继续上传
            </el-upload>
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
const emits = defineEmits(['download', 'batchUpload'])

const dialogVisible = ref(false)

// 取消的方法
function cancelBtn () {
  handleClose()
}

// 确定的方法
function continueUpload () {
  emits('batchUpload')
  handleClose()
}

// 关闭弹窗的方法
function handleClose () {
  dialogVisible.value = false
}

// 下载模板的方法
function downloadTemplate () {
  emits('download')
  handleClose()
}

// 批量上传的文件
function handleFileChange (file) {
  console.log(file)
  dialogVisible.value = false
  emits('batchUpload', file)
}


defineExpose({
  dialogVisible
})


</script>

<style lang='scss' scoped>
.container {
  font-size: 14px;
  color: #363636;
}

.cancel-btn {
  width: 108px;
  height: 40px;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #5974ff;
  font-size: 16px;
  color: #5974ff;
  &:hover {
    background-color: transparent;
  }
  &:focus {
    background-color: transparent;
  }
}

.confirm-btn {
  width: 108px;
  height: 40px;
  background: #5974ff;
  border-radius: 6px 6px 6px 6px;
  font-size: 16px;
  color: #ffffff;
  border: 1px solid #5974ff;
  &:hover {
    color: #ffffff;
  }
  &:focus {
    color: #ffffff;
  }
}

::v-deep(.el-upload) {
  width: 108px;
  height: 40px;
}
</style>
